<template>
    <view class="charts-box" :style="{ width: width, height: height }">
        <qiun-data-charts
            type="bar"
            :canvas2d="canvas2d"
            :opts="opts"
            :tooltipShow="false"
            :chartData="chartData"
        />
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
interface SeriesType {
    data: { color?: string; value: number }[];
}
interface ChartDataType {
    categories: string[];
    series: SeriesType[];
}
const props = withDefaults(
    defineProps<{
        width?: string;
        height?: string;
        chartData: ChartDataType;
    }>(),
    { height: '420rpx', categories: () => [] },
);
const canvas2d = ref(true);
const chartData = ref(props.chartData);
const opts = ref({
    padding: [0, 25, 0, 0],
    enableScroll: false,
    legend: {
        position: 'top',
        padding: 2,
        show: false,
    },
    xAxis: {
        boundaryGap: 'justify',
        disableGrid: false,
        min: 0,
        axisLine: false,
        type: 'grid', // X轴类型
        gridType: 'dash', // X轴网格线类型
        gridColor: '#d4d4d4',
        splitNumber: 10,
        format: 'integerFormat',
    },
    yAxis: {},
    extra: {
        bar: {
            type: 'group',
            width: 25,
            meterBorde: 1,
            meterFillColor: '#FFFFFF',
            activeBgColor: '#000000',
            activeBgOpacity: 0.05,
            barBorderCircle: false,
            seriesGap: 2,
            categoryGap: 2,
        },
    },
});
</script>

<style lang="scss" scoped>
.charts-box {
    width: 100%;
}
</style>
